<template>
    <div class="white-box">
        <el-form ref="rulePassRef" :model="rulePassForm" :rules="ruleCheckPass" label-width="120px">
            <el-form-item label="原密码" prop="old_pass">
                <el-input v-model.trim="rulePassForm.old_pass" type="password" clearable placeholder="请输入原密码" />
            </el-form-item>
            <el-form-item label="新密码" prop="new_pass">
                <el-input v-model.trim="rulePassForm.new_pass" type="password" clearable placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item>
                <div class="flexs" style="margin-top: 30px">
                    <el-button type="primary" :loading="form_loading" @click="submitPassForm(rulePassRef)">确认修改</el-button>
                    <el-button @click="resetPassForm(rulePassRef)">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, reactive } from "vue"
import { useRouter } from "vue-router"

const { proxy } = getCurrentInstance()
const router = useRouter()

onMounted(() => {
 
})

/**
 * 修改密码
 * @property {Boolean} form_loading 提交按钮状态
 * @property {Array} rulePassRef 表单规则
 * @property {Object} rulePassForm  表单字段
 * @property {Object} ruleCheckPass  表单提示
 * @property {Function} submitPassForm 提交表单
 */
const form_loading = ref(false)
const rulePassRef = ref(null)
const rulePassForm = reactive({
    old_pass: "",
    new_pass: "",
})
const ruleCheckPass = reactive({
    old_pass: [{ required: true, message: "请输入原密码", trigger: "blur" }],
    new_pass: [{ required: true, message: "请输入新密码", trigger: "blur" }],
})
const submitPassForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            proxy.$axios
                .post("passport/modifyPasswd", {
                    password: rulePassForm.old_pass,
                    new_password: rulePassForm.new_pass,
                })
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        router.push("/")
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetPassForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>
<script>
export default {
    name: "ChangePass",
}
</script>

<style lang="less" scoped>
.el-form {
    width: 400px;
}
</style>
